<template>
    <div class="photoinfo-container">
        <h3>标题</h3>  
        <p class="subtitle">
            <span>发表时间:</span>
            <span>点击：5次</span>
        </p>  

        <!-- 缩略图区域 -->
        <div class="thumbs">
            <vue-preview
      :list="list"
      :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
      :previewBoxStyle="{border: '1px solid #eee'}"
      :tapToClose="true"
      @close="closeHandler"
      @destroy="destroyHandler"
    />
        
        </div>
        
        <p>一段文字~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~</p>
        <!-- 放置一个现成的评论子组件 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>
    
<script>
//导入评论子组件
import comment from '../subcomponents/comment.vue';

export default{
    data(){
        return {
            list:[
            {src:'../../images/zz1.jpg',w: 600,
          h: 400},
            {src:'../../images/zz2.jpg',w: 600,
          h: 400},
            {src:'../../images/zz3.jpg',w: 600,
          h: 400},
            {src:'../../images/zz4.jpg',w: 600,
          h: 400},
            {src:'../../images/zz5.jpg',w: 600,
          h: 400},
            ]
        //  list: [{
        //   src: 'https://placekitten.com/600/400',
        //   w: 600,
        //   h: 400
        // }, {
        //   src: 'https://placekitten.com/1200/900',
        //   w: 1200,
        //   h: 900
        // }]
      }
    },
    methods:{},
    components:{
        //注册 评论子组件
        "cmt-box":comment
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 3px;
    h3{
    text-align: center;
    font-size: 16px;
    margin:15px 0;
}
    .subtitle{
    display: flex;
    justify-content: space-between;
    font-size:12px;
    color: blue;
}
.thumbs{
    img{
      margin: 10px;
      box-shadow: 0 0 8px #999;
      width: 70px;
      height: 50px;
    }
}
}

</style>